<template>
  <base-container class="flex-1">
    <base-card class="h-full flex flex-col">
      <template #header>
        <div class="flex items-center gap-3">
          <span class="text-lg font-medium text-ct1">绑定{{ platformName }}小程序</span>
          <span class="text-sm font-regular text-ct3">租户可通过{{ platformName }}进行租赁</span>
        </div>
      </template>
      <!-- 卡片内容区域 -->
      <div class="card-container">
        <!-- 已有小程序卡片 -->
        <div class="card">
          <!-- 顶部渐变背景 -->
          <div class="card-header">
            <img class="card-header-icon" src="@/assets/setting/img_empty_1.png" />
          </div>

          <!-- 卡片内容 -->
          <div class="card-content">
            <h3 class="card-title">已有小程序</h3>
            <p class="card-description">为保证所有功能的正常使用，授权时请选择所有权限</p>
            <el-button type="primary" class="btn" @click="handleBind">立即绑定</el-button>
          </div>
        </div>

        <!-- 没有小程序卡片 -->
        <div class="card">
          <!-- 顶部渐变背景 -->
          <div class="card-header">
            <img class="card-header-icon" src="@/assets/setting/img_empty_2.png" />
          </div>

          <!-- 卡片内容 -->
          <div class="card-content">
            <h3 class="card-title">没有小程序</h3>
            <p class="card-description">请在{{ platformName }}开放平台申请新的小程序，再来绑定</p>
            <el-button type="text" class="btn btn-border" @click="handleApply">立即申请</el-button>
          </div>
        </div>
      </div>
    </base-card>
  </base-container>
</template>

<script setup>
  // 定义 props
  const props = defineProps({
    type: {
      type: String,
      default: "ALIPAY", // 默认支付宝
      validator: value => ["ALIPAY", "WECHAT", "KUAISHOU"].includes(value),
    },
  });

  const emit = defineEmits(["bind", "apply"]);

  // 平台名称映射
  const platformMap = {
    ALIPAY: "支付宝",
    WECHAT: "微信",
    KUAISHOU: "快手",
  };

  // 计算属性：根据 type 获取平台名称
  const platformName = computed(() => {
    return platformMap[props.type] || "支付宝";
  });

  const handleBind = () => {
    console.log("handleBind", props.type);
    emit("bind");
  };

  const handleApply = () => {
    console.log("handleApply", props.type);
    emit("apply");
  };
</script>

<style scoped lang="scss">
  .card-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .card {
    position: relative;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
  }

  .card-header {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--bd9) 0%, rgba(255, 255, 255, 0) 100%);
  }

  .card-header-icon {
    position: absolute;
    top: 24px;
    width: 120px;
    height: 100px;
  }

  .card-content {
    padding: 48px 24px 20px 24px;
    text-align: center;
  }

  .card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ct1);
    margin-bottom: 12px;
  }

  .card-description {
    font-size: 14px;
    color: var(--ct3);
    margin-bottom: 12px;
  }

  .btn {
    width: 88px;
    font-weight: 400;
  }

  .btn-border {
    border: 1px solid var(--bd);
  }
</style>
